<template>
  <div>
    <div class="back-style">
      <h3 id="personal-info-title">个人信息</h3>
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm info">
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model.number="ruleForm.nickname" ></el-input>
        </el-form-item>
        <el-form-item label="实名" prop="name">
          <el-input v-model.number="ruleForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model.number="ruleForm.sex" ></el-input>
        </el-form-item>
        <el-form-item label="计费" prop="fee">
          <el-input v-model.number="ruleForm.fee" ></el-input>
        </el-form-item>
      </el-form>
      <div id="btn-box">
        <el-button type="primary" @click="gotoPersonalHistory()">历史</el-button>
        <el-button type="danger" @click="modifyPersonalInfo()">修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalInfo",
  data() {
    return {
      ruleForm: {
        account: '1791',
        password: '1971',
        nickname: 'Jack',
        name: 'tch',
        sex: '女',
        fee: '0.5',
      },
    };
  },
  methods: {
    gotoPersonalHistory() {
      this.$router.push("/lessee-center/personal-center/view-personal-history");
    },
    modifyPersonalInfo(){
      this.$router.push("/lessee-center/personal-center/modify-personal-info");
    }
  },
}
</script>

<style scoped>
#personal-info-title{
  background-color: #1b6d85;
  text-align: center;
}
el-button{
  margin: 10px 20px 10px 20px;
}

#btn-box{
  margin-top: 20px;
  width: 100%;
  display: flex;
  position: absolute;
  justify-content: space-around;
}

.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.back-style{
  position: absolute;
  width: 50%;
  left: 25%;
  background-color: #c29e80;
}
</style>